<template>
  <div class="order">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="合同订单" name="1">
        <!-- 合同订单 -->
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%; margin: 30px 0"
        >
          <el-table-column prop="contractCode" label="合同编号">
          </el-table-column>
          <el-table-column prop="signDate" label="生成日期"> </el-table-column>
          <el-table-column prop="totalPrice" label="合同金额(元)">
          </el-table-column>
          <el-table-column prop="signDate" label="当前状态">
            <!-- approveStatus 0 待审批 1已审批 -->
            <template slot-scope="scope">
              {{ scope.row.contractStatusName }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="approveTime" label="变更日期">
          </el-table-column> -->
          <el-table-column prop="signDate" label="支付凭证">
            <template slot-scope="scope">
             
              <!-- {{ scope.row.pingzhengUrl  }} -->
              <el-image
              v-if="scope.row.pingzhengUrl"
                style="width: 100px; height: 100px"
                :src="scope.row.pingzhengUrl"
                :preview-src-list="[scope.row.pingzhengUrl]"
              >
              </el-image>
            </template>
          </el-table-column>

          <el-table-column prop="signDate" label="合同">
            <template slot-scope="scope">

<!-- 
              <a
              v-if="scope.row.wanzhenHtUrl"
                  href="javascript:void(0);"
                  @click="downLoad(scope.row.wanzhenHtUrl, '下载合同')"
                
                >
                  <span>下载合同</span>
                </a> -->


              
             <a v-if="scope.row.wanzhenHtUrl" :href="scope.row.wanzhenHtUrl" target="_blank" rel="noopener noreferrer">下载合同</a>
            </template>
          </el-table-column>


          <el-table-column prop="wuliu" label="物流信息">
         
          </el-table-column>


          
          <!-- <el-table-column
            prop="approveTime"
            label="发货时间"
          ></el-table-column> -->

          <el-table-column fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <!--  v-if="scope.row.approveStatus == 1" -->
              <el-button
                v-if="scope.row.contractStatus == 2"
                @click="downloadht(scope.row)"
                type="text"
                size="small"
                >下载带有卖家公章合同</el-button
              >
              <el-button
                v-if="scope.row.contractStatus == 3"
                @click="uploadht(scope.row)"
                type="text"
                size="small"
                >上传盖有买方公章合同</el-button
              >
              <el-button
                v-if="scope.row.contractStatus == 5"
                @click="zhifu(scope.row)"
                type="text"
                size="small"
                >上传支付凭证</el-button
              >
              <el-button
                v-if="scope.row.contractStatus == 9"
                @click="qesh(scope.row)"
                type="text"
                size="small"
                >确认收货</el-button
              >
              <el-button @click="detail(scope.row)" type="text" size="small"
                >详情</el-button
              >

              <el-button
                v-if="scope.row.contractStatus == 10"
                @click="kaipiao(scope.row)"
                type="text"
                size="small"
                >开票</el-button
              >
              <el-button
                v-if="scope.row.contractStatus == 10"
                @click="shouhou(scope.row)"
                type="text"
                size="small"
                >售后维修</el-button
              >

              <!-- 上传流水单 -->
              <!--  v-if="scope.row.approveStatus== 1" -->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="报价单订单" name="2">
        <!-- 报价单订单 -->
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%; margin: 30px 0"
        >
          <el-table-column prop="contractCode" label="报价单编号">
          </el-table-column>

          <el-table-column prop="signDate" label="生成日期"> </el-table-column>
          <el-table-column prop="totalPrice" label="金额(元)">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="download(scope.row)" type="text" size="small"
                >下载报价单</el-button
              >
              <el-button @click="shouhou(scope.row)" type="text" size="small"
                >售后维修</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="支付订单" name="3">
        <!-- 支付订单 -->

        <el-table :data="tableData1" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                class="table"
                :stripe="true"
                :data="props.row.contractDetails"
                border
                style="width: 100%"
                ref="multipleTable"
              >
                <el-table-column fixed prop="date" label="商品名称">
                  <template slot-scope="scope">
                    <div class="nameBox">
                      <img src="" alt="" />
                      <el-image
                        style="width: 90px; height: 90px"
                        :src="scope.row.imgUrl"
                        :prediv-src-list="[scope.row.imgUrl]"
                      >
                      </el-image>
                      <div class="name">{{ scope.row.productName }}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="modelSpec"
                  label="规格型号"
                  width="200"
                >
                  <template slot-scope="scope">
                    <el-tag
                      v-if="scope.row.specType && scope.row.specType.skuValue1"
                      type="success"
                      >{{
                        scope.row.specType && scope.row.specType.skuValue1
                      }}</el-tag
                    >
                    <el-tag
                      v-if="scope.row.specType && scope.row.specType.skuValue2"
                      style="margin: 0 10px"
                      type="success"
                      >{{
                        scope.row.specType && scope.row.specType.skuValue2
                      }}</el-tag
                    >
                    <el-tag
                      v-if="scope.row.specType && scope.row.specType.skuValue3"
                      type="success"
                      >{{
                        scope.row.specType && scope.row.specType.skuValue3
                      }}</el-tag
                    >
                    <!-- {{scope.row.specType}} -->
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="remark"
                  label="备注"
                  width="200"
                >
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="totalPrice"
                  width="150"
                  label="合同单价"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="number"
                  label="数量"
                  width="160"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  width="150"
                  prop="address"
                  label="数量小计"
                >
                  <template slot-scope="scope">
                    <span style="font-weight: bold"
                      >￥{{ scope.row.totalPrice * 1 * scope.row.number }}</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <!-- <el-table-column label="商品 ID" prop="id"> </el-table-column> -->
          <el-table-column label="订单编号" prop="orderNo"> </el-table-column>
          <el-table-column label="订单金额(元)" prop="totalPrice">
          </el-table-column>
          <el-table-column label="下单时间" prop="signDate"> </el-table-column>

          <el-table-column label="支付状态" prop="signDate">
            <!-- payStatus 1 待支付 2 已支付 -->
            <template slot-scope="scope">
              {{ scope.row.payStatus == 1 ? "待支付" : "已支付" }}
            </template>
          </el-table-column>
          <el-table-column label="支付时间" prop="paySuccTime">
          </el-table-column>
          <!-- <el-table-column label="发货状态" prop="signDate">
            <template slot-scope="scope">
              {{ scope.row.deliveryStatus == 0 ? "未发货" : "已发货" }}
            </template>
            0 未发货 1已发货
          </el-table-column> -->
          <el-table-column label="发货时间" prop="contractStatusName">
          </el-table-column>
          <el-table-column label="快递信息" prop="wuliu">
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="130">
            <template slot-scope="scope">
              <!-- <el-button @click="download(scope.row)" type="text" size="small"
            >查看详情</el-button
          > -->
              <el-button
                @click="readdgwcart(scope.row)"
                type="text"
                size="small"
                >重新加入购物车</el-button
              >
              <el-button
                v-if="scope.row.payStatus == 1"
                @click="continuepay(scope.row)"
                type="text"
                size="small"
                >继续支付</el-button
              >

              <el-button
                v-if="scope.row.payStatus == 2"
                @click="xiazaifapiao(scope.row)"
                type="text"
                size="small"
                >申请发票</el-button
              >

              <el-button @click="shouhou(scope.row)" type="text" size="small"
                >售后维修</el-button
              >

              <el-button
                v-if="scope.row.payStatus == 1"
                @click="del(scope.row)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 支付 -->

    <el-dialog title="上传支付凭证" :visible.sync="dialogVisible" width="50%">
      <el-upload
        v-if="dialogVisible"
        class="avatar-uploader"
        :headers="{
          Authorization: 'Bearer ' + token,
        }"
        action="https://www.acmemach.cn/uat-api/system/oss/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="zhifuImg" :src="zhifuImg" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="上传盖有买方公章合同"
      :visible.sync="dialogVisible4"
      width="50%"
    >
      <el-upload
        class="upload-demo"
        action="https://www.acmemach.cn/uat-api/system/oss/upload"
        :headers="{
          Authorization: 'Bearer ' + token,
        }"
        :on-change="handleChange"
        :on-remove="handleRemove1"
        :limit="1"
        :before-upload="beforeAvatarUpload1"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="sub1">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="" :visible.sync="dialogVisible11" width="70%">
      <img
        style="width: 100%; display: block"
        src="../../assets/666.jpg"
        alt=""
      />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible11 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="详情" :visible.sync="detailMask" width="50%">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in detailList"
          :key="index"
          :timestamp="activity.contractStatusChangeTime"
        >
          {{ activity.contractStatusName }}
        </el-timeline-item>
      </el-timeline>

      <!-- <el-timeline>
    <el-timeline-item :key="index" v-for="(item,index) in detailList" :timestamp="item.contractStatusChangeTime" placement="top">
      <el-card>
        <h4>{{ item.contractStatusName }}</h4>
        
      </el-card>
    </el-timeline-item>
   
  </el-timeline> -->

      <span slot="footer" class="dialog-footer">
        <el-button @click="detailMask = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getorderlist,
  downloadpdf,
  downloadquotation,
  readdgwcart,
  delorder,
  aftersales,
  uploadstream,
  uploadpdf,
  confirmshouhuo,
  contractstatus,
  applyforinvoicing
} from "../../apis/index";
export default {
  name: "order",
  components: {},
  data() {
    return {
      detailList: [],
      detailMask: false,
      fileList: [],
      dialogVisible4: false,
      dialogVisible11: false,
      token: "",
      zhifuImg: "",
      dialogVisible: false,
      // htmlCode:null,
      tableData1: [],
      activeName: "1",
      list: [
        {
          name: "合同",
          id: "0",
        },
        {
          name: "报价单",
          id: "1",
        },
        {
          name: "支付订单",
          id: "2",
        },
      ],
      tableData: [],
    };
  },
  computed: {},
  created() {
    this.getList();
    this.token = localStorage.getItem("jztoken");
  },
  methods: {

    // downLoad(urls, name) {


    //   fetch(urls)
    //     .then((res) => res.blob())
    //     .then((blob) => {
    //       const link = document.createElement('a');
    //       link.href = URL.createObjectURL(blob);
    //       // 下载文件的名称及文件类型后缀
    //       link.download = name;
    //       document.body.appendChild(link);
    //       link.click();
    //       //在资源下载完成后 清除 占用的缓存资源
    //       window.URL.revokeObjectURL(link.href);
    //       document.body.removeChild(link);
    //     });
     
    //   // const x = new window.XMLHttpRequest();
    //   // x.open("GET", urls, true);
    //   // x.responseType = "blob";
    //   // x.onload = () => {
    //   //   const url = window.URL.createObjectURL(x.response);
    //   //   const a = document.createElement("a");
    //   //   a.href = url;
    //   //   a.target = "_blank";
    //   //   a.download = name + urls.match(/\.([^\.]+)$/)[0];
    //   //   a.style.display = "none";
    //   //   document.body.append(a);
    //   //   a.click();
    //   // };
    //   // x.send();
    // },

    
    qesh(id) {
      this.$confirm("确认收货吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          confirmshouhuo({
            id: id.id,
          })
            .then((res) => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.getList();
            })
            .catch(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    detail(id) {
      this.detailMask = true;
      


      contractstatus({
        id: id.id,
      })
        .then((res) => {
          console.log(res, 244444);
          this.detailList = res.data.data;
        })
        .catch(() => {});
    },
    kaipiao(val) {
      // applyforinvoicing(val.id)
      //   .then((res) => {
      //     this.$message({
      //     message: res.msg,
      //     type: "success",
      //   });
      //   })
      //   .catch(() => {});
    },

    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove1(file, fileList) {
      this.fileList = [];
    },
    beforeAvatarUpload1(file) {
      const isMP4 = file.name.split(".")[1] === "pdf";
      if (!isMP4) {
        this.$message({
          message: "只能上传pdf文件",
          type: "error",
        });
      }
      return isMP4;
    },
    uploadht(id) {
      this.curid = id.id;
      this.dialogVisible4 = true;
    },
    sub1(val) {
      console.log(this.fileList, 4456);
      if (!this.fileList.length) {
        this.$message({
          type: "warning",
          message: "请上传上传盖有买方公章合同！",
        });
        return;
      }
      // wanzhenHtUrl
      uploadpdf({
        id: this.curid,
        wanzhenHtUrl: this.fileList?.length
          ? this.fileList?.[0]?.response?.data?.url
          : "",
      })
        .then((res) => {
          this.dialogVisible4 = false;
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.getList();
        })
        .catch(() => {});
    },
    sub() {
      if (!this.zhifuImg) {
        this.$message({
          type: "warning",
          message: "请上传支付凭证!",
        });
        return;
      }
      uploadstream({
        id: this.curid,
        pingzhengUrl: this.zhifuImg,
      })
        .then((res) => {
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.getList();
        })
        .catch(() => {});
    },
    //上传头像
    handleAvatarSuccess(res, file) {
      console.error(res, file, 33333333);
      this.zhifuImg = res.data.url;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 20MB!");
      }
      return isLt2M;
    },
    zhifu(id) {
      this.curid = id.id;
      this.dialogVisible = true;
    },
    // xiazaifapiao() {},
    shouhou(id) {
      aftersales(id.id)
        .then((res) => {
          this.$message({
            type: "success",
            message: "您已发起售后咨询，稍后我们将有工作人员联系您!",
          });
          this.dialogVisible11 = true;
          this.getList();
        })
        .catch(() => {});
    },
    del(id) {
      delorder({
        id: id.id,
      })
        .then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        })
        .catch(() => {});
    },
    continuepay(id) {
      this.$emit("repay", id.id);
    },
    readdgwcart(id) {
      console.log(id.id, 4444);
      readdgwcart(id.id)
        .then((res) => {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        })
        .catch(() => {});
    },
    handleClick(tab, event) {
      // console.log(tab, event,333333);
      // console.log(this.activeName);
      this.getList();
      // this.curCate = this.list[this.activeName]?.name;
      // this.getissuelist();
    },
    getList() {
      //     "contractType": "1", 1生成合同 2 报价单 3 支付
      //     "payStatus": 1, 1 待支付 2 已支付
      //     "approveStatus": 1, 0 待审批 1已审批
      //     "searchTimeType": 1   1=》1年     2 =》1个月     3 =》3个月     4 =》6个月
      getorderlist({
        contractType: this.activeName,
        payStatus: "",
        approveStatus: "",
        searchTimeType: "",
      })
        .then((res) => {
          this.tableData = res.data.data;
          if (this.activeName == 3) {
            this.tableData1 = res.data.data;
          }
        })
        .catch(() => {});
    },
    download(url) {
      // 下载报价单

      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // console.log(url,4444);
      downloadquotation(url.id)
        .then((res) => {

          console.log(res,333333)
          const content = res?.data;
          const blob = new Blob([content], {
            type: `application/pdf;charset-UTF-8`,
          });
          var name = `${url.contractCode}报价单.xlsx`;
          const elink = document.createElement("a");
          elink.download = name;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);

          loading.close();
        })
        .catch(() => {});
    },
    downloadht(url) {
      // const loading = this.$loading({
      //   lock: true,
      //   text: "Loading",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)",
      // });
      // console.log(url,4444);
      downloadpdf(url.id)
        .then((res) => {
          const content = res.data;

          console.log(content.data.url, 88888);
          this.getList();
          window.open(content.data.url, "_blank");
          // const blob = new Blob([content], {
          //   type: `application/pdf;charset-UTF-8`,
          // });
          // var name = "合同.pdf";
          // const elink = document.createElement("a");
          // elink.download = name;
          // elink.style.display = "none";
          // elink.href = content.data.url;
          // document.body.appendChild(elink);
          // elink.click();
          // URL.revokeObjectURL(elink.href); // 释放URL 对象
          // document.body.removeChild(elink);

          // loading.close();
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  .nameBox {
    display: flex;
    align-items: center;
    .name {
      margin-left: 15px;
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9 !important;
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
}
</style>